<template>
  <div class="statistics">
    <h2>数据统计</h2>
    
    <!-- 时间范围选择 -->
    <div class="date-range">
      <select v-model="timeRange">
        <option value="week">本周</option>
        <option value="month">本月</option>
        <option value="year">本年</option>
      </select>
    </div>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card">
        <h3>总打卡次数</h3>
        <div class="stat-number">{{ stats.totalRecords }}</div>
      </div>
      <div class="stat-card">
        <h3>总专注时长</h3>
        <div class="stat-number">{{ formatDuration(stats.totalDuration) }}</div>
      </div>
      <div class="stat-card">
        <h3>累计获得积分</h3>
        <div class="stat-number">{{ stats.totalPoints }}</div>
      </div>
      <div class="stat-card">
        <h3>完成率</h3>
        <div class="stat-number">{{ stats.completionRate }}%</div>
      </div>
    </div>

    <!-- 习惯分析 -->
    <div class="habit-analysis">
      <h3>习惯分析</h3>
      <div class="habit-chart">
        <!-- 这里可以使用图表库如ECharts来展示数据 -->
        <div v-for="habit in stats.habitStats" :key="habit.id" class="habit-bar">
          <span class="habit-name">{{ habit.name }}</span>
          <div class="progress-bar">
            <div :style="{ width: habit.completionRate + '%' }" class="progress"></div>
          </div>
          <span class="completion-rate">{{ habit.completionRate }}%</span>
        </div>
      </div>
    </div>

    <!-- 时间分布 -->
    <div class="time-distribution">
      <h3>时间分布</h3>
      <div class="time-chart">
        <!-- 这里可以使用图表库展示不同时间段的专注分布 -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Statistics',
  props: {
    childId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      timeRange: 'week',
      stats: {
        totalRecords: 0,
        totalDuration: 0,
        totalPoints: 0,
        completionRate: 0,
        habitStats: []
      }
    }
  },
  watch: {
    timeRange() {
      this.fetchStatistics()
    }
  },
  methods: {
    async fetchStatistics() {
      try {
        const response = await axios.get(
          `http://localhost:5000/api/statistics/${this.childId}`,
          { params: { timeRange: this.timeRange } }
        )
        this.stats = response.data
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    },
    formatDuration(minutes) {
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      return `${hours}小时${mins}分钟`
    }
  },
  mounted() {
    this.fetchStatistics()
  }
}
</script>

<style scoped>
.statistics {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.date-range {
  margin-bottom: 20px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #42b983;
  margin-top: 10px;
}

.habit-analysis {
  margin-top: 30px;
}

.habit-bar {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.habit-name {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.progress-bar {
  flex-grow: 1;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #42b983;
  transition: width 0.3s ease;
}

.completion-rate {
  width: 60px;
  text-align: left;
  margin-left: 10px;
}

.time-distribution {
  margin-top: 30px;
}
</style> 